/*
  Written in the 2 hours between 2am and 4am, probably contains bugs.
*/


var DIALOG_MASK_ID = 'dialog-mask';
var DIALOG_CONTAINER_ID = 'dialog-container';
var DIALOG_CONTENT_ID = 'dialog-content';
var DIALOG_BUTTONS_ID = 'dialog-buttons';
var DIALOG_TITLE_ID = 'dialog-title';

function Dialog(title, okCallback, cancelCallback) {
  this.title = title;
  this.saveButtonText = 'Save';
  this.cancelButtonText = 'Cancel';
  this.okCallback = okCallback;
  this.cancelCallback = cancelCallback;
  this.contentHTML = '';
}

Dialog.prototype.handleOk = function() {
  if (this.okCallback) {
    this.okCallback();
  }
  this.hide();
};

Dialog.prototype.handleCancel = function() {
  if (this.cancelCallback) {
    this.cancelCallback();
  }
  this.hide();
};

Dialog.prototype.show = function() {
  this.showMask();
  this.showDialog();
  this.centerDialog();
  util.addEvent(window, 'resize', this.resizeMaskDiv);
};

Dialog.prototype.hide = function() {
  util.removeEvent(window, 'resize', this.resizeMaskDiv);
  this.hideDialog();
  this.hideMask();
};

Dialog.prototype.showMask = function() {
  document.body.appendChild(this.getMaskDiv());
};

Dialog.prototype.hideMask = function() {
  document.body.removeChild($(DIALOG_MASK_ID));
};

Dialog.prototype.getMaskDiv = function() {
  var pageSize = util.getPageSize();
  var div = document.createElement('div');
  div.id = DIALOG_MASK_ID;
  div.style.width = pageSize[0] + 'px';
  div.style.height = pageSize[1] + 'px';
  return div;
};

Dialog.prototype.resizeMaskDiv = function() {
  var pageSize = util.getPageSize();
  var div = $(DIALOG_MASK_ID);
  div.style.width = pageSize[0] + 'px';
  div.style.height = pageSize[1] + 'px';
};

Dialog.prototype.showDialog = function() {
  var div = document.createElement('div');
  div.id = DIALOG_CONTAINER_ID;
  div.innerHTML = this.getDialogHTML();
  div.style.visibility = 'hidden';
  document.body.appendChild(div);
  this.setupButtons();
  this.centerDialog();
  div.style.visibility = 'visible';
};

Dialog.prototype.hideDialog = function() {
  document.body.removeChild($(DIALOG_CONTAINER_ID));
};

Dialog.prototype.centerDialog = function() {
  var pageSize = util.getPageSize();
  var pageScroll = util.getPageScroll();
  var div = $(DIALOG_CONTAINER_ID);
  div.style.left = parseInt((pageSize[0] / 2 -
      div.offsetWidth / 2), 10) + 'px';
  div.style.top = parseInt((pageScroll[1] + pageSize[3] / 2 -
      div.offsetHeight / 2), 10) + 'px';
};

Dialog.prototype.getDialogHTML = function() {
  var dialogHTML = [
    '<b class="dialog-rounded-outer">',
    '<b class="dialog-rounded-outer1"><b></b></b>',
    '<b class="dialog-rounded-outer2"><b></b></b>',
    '<b class="dialog-rounded-outer3"></b>',
    '<b class="dialog-rounded-outer4"></b>',
    '<b class="dialog-rounded-outer5"></b></b>',
    '<div id="' + DIALOG_TITLE_ID + '">',
    this.title,
    '</div>',
    '<div class="dialog-rounded-outerfg">',
      '<b class="dialog-rounded-inner">',
      '<b class="dialog-rounded-inner1"><b></b></b>',
      '<b class="dialog-rounded-inner2"><b></b></b>',
      '<b class="dialog-rounded-inner3"></b>',
      '<b class="dialog-rounded-inner4"></b>',
      '<b class="dialog-rounded-inner5"></b></b>',
      '<div class="dialog-rounded-innerfg" id="' + DIALOG_CONTENT_ID + '">',
        this.contentHTML,
      '</div>',
      '<b class="dialog-rounded-inner">',
      '<b class="dialog-rounded-inner5"></b>',
      '<b class="dialog-rounded-inner4"></b>',
      '<b class="dialog-rounded-inner3"></b>',
      '<b class="dialog-rounded-inner2"><b></b></b>',
      '<b class="dialog-rounded-inner1"><b></b></b></b>',
      '<div class="buttons" id="' + DIALOG_BUTTONS_ID + '">',
      '</div>',
    '</div>',
    '<b class="dialog-rounded-outer">',
    '<b class="dialog-rounded-outer5"></b>',
    '<b class="dialog-rounded-outer4"></b>',
    '<b class="dialog-rounded-outer3"></b>',
    '<b class="dialog-rounded-outer2"><b></b></b>',
    '<b class="dialog-rounded-outer1"><b></b></b></b>'
  ].join('');
  return dialogHTML;
};

Dialog.prototype.setupButtons = function() {
  var div = $(DIALOG_BUTTONS_ID);
  var okButton = this.getButton(this.saveButtonText, this.handleOk.bind(this));
  var cancelButton = this.getButton(this.cancelButtonText,
      this.handleCancel.bind(this));
  div.appendChild(okButton);
  div.appendChild(cancelButton);
};

Dialog.prototype.getButton = function(value, onclick) {
  var button = document.createElement('input');
  button.setAttribute('value', value);
  button.setAttribute('type', 'button');
  button.onclick = onclick;
  return button;
};
